import React, { FC } from 'react';
import ProTable, { ProColumns } from '@/components/ProTable';
import styles from './index.less';
import { Modal, message } from 'antd';
import useHoxModel from '../../../../useHoxModel';
import moment from 'moment';
import { RunAlarmReturnType, RunAlarmParamsType } from '../../../../API';
import DropdownMenu from '@/components/DropdownMenu';
import ConfirmProps from '@/components/CommonModal/Confirm';
export const modelName = 'realTimeAlarm';
const { confirm } = Modal;

interface Props {
  getRunAlarm: (params: RunAlarmParamsType & { [key: string]: any }) => Promise<any>;
  id?: number;
}
const RealTimeCard: FC<Props> = ({ getRunAlarm, id }) => {
  const { cancelAlarm, endAlarm, realtimeActionRef: actionRef } = useHoxModel((model) => [
    model.realtimeActionRef,
  ]);

  const columns: ProColumns<RunAlarmReturnType>[] = [
    {
      title: '门名称',
      dataIndex: 'deviceName',
      formItemColConfig: { md: 6, lg: 6, xl: 5, xxl: 5 },
      align: 'center',
    },
    {
      title: '告警等级',
      dataIndex: 'alarmGrade',
      align: 'center',
      formItemColConfig: { md: 6, lg: 6, xl: 5, xxl: 5 },
      valueEnum: {
        1: '一级告警',
        2: '二级告警',
        3: '三级告警',
        4: '四级告警',
      },
    },
    {
      title: '时间区间',
      dataIndex: 'time',
      hideInTable: true,
      formItemColConfig: { md: 8, lg: 8, xl: 8, xxl: 8 },
      align: 'center',
      valueType: 'dateRange',
    },
    {
      title: '告警时间',
      dataIndex: 'startTime',
      hideInSearch: true,
      align: 'center',
      valueType: 'date',
    },
    {
      title: '告警信息',
      dataIndex: 'alarmMsg',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      key: 'option',
      width: '10%',
      align: 'center',
      valueType: 'option',
      render: (_, record, index) => [
        <DropdownMenu<RunAlarmReturnType>
          key={index.toString(36) + index}
          record={record}
          typeProps={[
            // {
            //   key: 'confirmAlarm',
            //   name: '确认',
            //   icon: 'iconqueren',
            //   className: styles['confirm'],
            //   onClick: (record: RunAlarmReturnType) => {
            //     confirm({
            //       ...new ConfirmProps('是否要确认告警?', ' '),
            //       async onOk() {
            //         const res = await confirmAlarm({ alarmID: record.alarmID });
            //         if (res?.result === 0) {
            //           message.success('确认告警成功！');
            //           actionRef.current?.reload();
            //         }
            //       },
            //     });
            //   },
            // },
            {
              key: 'closeAlarm',
              name: '关闭',
              icon: 'iconguanbi',
              className: styles['close'],
              onClick: (record: RunAlarmReturnType) => {
                confirm({
                  ...new ConfirmProps('是否要关闭告警?', ' '),
                  async onOk() {
                    const res = await endAlarm({ alarmID: record.alarmID });
                    if (res?.result === 0) {
                      message.success('关闭告警成功！');
                      actionRef.current?.reload();
                    }
                  },
                });
              },
            },
            {
              key: 'cancelAlarm',
              name: '取消',
              icon: 'iconquxiao',
              className: styles['cancel'],
              onClick: (record: RunAlarmReturnType) => {
                confirm({
                  ...new ConfirmProps('是否要取消告警?', ' '),
                  async onOk() {
                    const res = await cancelAlarm({ alarmID: record.alarmID });
                    if (res?.result === 0) {
                      message.success('取消告警成功！');
                      actionRef.current?.reload();
                    }
                  },
                });
              },
            },
          ]}
        />,
      ],
    },
  ];

  return (
    <>
      <ProTable<RunAlarmReturnType>
        columns={columns}
        request={async (params: { [key: string]: any }) => {
          const time = params?.time || [];
          const startTime = time[0] && moment(time[0]).valueOf();
          const endTime = time[1] && moment(time[1]).valueOf();

          const data = await getRunAlarm({
            keyword: params.deviceName || undefined,
            number: params.pageSize,
            page: params.current,
            id: id || undefined,
            alarmGrade: params.alarmGrade,
            startTime: startTime || moment().startOf('day').subtract(7, 'day').valueOf(),
            endTime: endTime || moment().startOf('day').valueOf(),
          });
          return await {
            data: data?.alarmList || data?.door || [],
            success: true,
            total: data?.count || 0,
          };
        }}
        rowKey="alarmID"
        className={styles['table-wrap']}
        formColConfig={{ md: 4, lg: 4, xl: 6, xxl: 6 }}
        tableAlertRender={false}
        actionRef={actionRef}
        dateFormatter="string"
        headerTitle={false}
        options={{
          search: {
            name: 'keyword',
          },
        }}
        toolBarRender={false}
      />
    </>
  );
};
export default RealTimeCard;
